<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>数据页</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="static/css/platform2.css">
    <link rel="stylesheet" href="static/easyui/themes/default/easyui.css">
    <link href="static/easyui/themes/icon.css" rel="stylesheet" type="text/css"/>
    <link href="static/easyui/demo/demo.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="static/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="static/js/main.js"></script>
</head>
<body>
<div class="container">
    <div id="pf-bd">
        <!-- 左侧边侧滑菜单 -->
        <div id="pf-sider">
            <div class="easyui-panel" style="padding:5px">
                <ul id="folder-tree"></ul>
                <!-- 右键显示 -->
                <div id="mm1" class="easyui-menu" style="width:120px;">
                    <div onclick="append()" data-options="iconCls:'icon-add'">创建文件夹</div>
                    <div onclick="removeFolder()" data-options="iconCls:'icon-remove'">移除文件夹</div>
                    <div onclick="uploadFile()" data-options="iconCls:'icon-add'">上传文件</div>
                </div>
                <div id="mm2" class="easyui-menu" style="width:120px;">
                    <div onclick="removeFile()" data-options="iconCls:'icon-remove'">删除</div>
                    <div onclick="removeFile()" data-options="iconCls:'icon-remove'">移动到</div>
                </div>
            </div>
        </div>
        <!-- 右侧显示部分 -->
        <div id="pf-page">
            <div>
                延长油田 | 文件夹2 | 延12
            </div>
            <div id="tb" style="padding:0 30px;">
                开始时间：<input id="dt1" type="text" name="birthday">
                结束时间：<input id="dt2" type="text" name="birthday">
                关键词: <input type="text" id="payerCode" name="payerCode"
                               style="width:166px;height:35px;line-height:35px;"/>
                <a href="javascript:search()" id="" class="easyui-linkbutton"
                   data-options="iconCls:'icon-search'">查询</a>
                <a href="json/data_list.json" download class="easyui-linkbutton">下载</a>
                <a href="javascript:batchRemove()" class="easyui-linkbutton">删除</a>
                <a href="javascript:batchRemove()" class="easyui-linkbutton">移动</a>
                <a href="javascript:$('#dlg').dialog('open');" class="easyui-linkbutton">加标签</a>
                <a href="javascript:uploadFile()" class="easyui-linkbutton">上传</a>
            </div>
            <table id="dg"></table>
        </div>
    </div>


    <!-- 添加标签的弹框 -->
    <div id="dlg" class="easyui-dialog" title="批量添加标签" style="width:400px;height:200px;padding:10px"
         data-options="iconCls: 'icon-save',buttons: '#dlg-buttons'">
        <span>请输入要添加的标签：</span>
        <br/>
        <input class="easyui-tagbox" value="" style="width:100%">
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addTag()">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton"
           onclick="javascript:$('#dlg').dialog('close')">关闭</a>
    </div>

    <!-- 重命名的弹框 -->
    <div id="dlg-rename" class="easyui-dialog" title="文件重命名" style="width:400px;height:200px;padding:10px"
         data-options="iconCls: 'icon-save',buttons: '#dlg-rename-buttons'">
        <span>请输入新的文件名：</span>
        <br/>
        <input class="easyui-tagbox" value="" style="width:100%">
    </div>
    <div id="dlg-rename-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="rename()">保存</a>
        <a href="javascript:void(0)" class="easyui-linkbutton"
           onclick="javascript:$('#dlg-rename').dialog('close')">关闭</a>
    </div>
</div>
<script type="text/javascript">

    $(function () {
        $('#dlg').dialog('close')
        $('#dlg-rename').dialog('close')
        $('#dt1').datetimebox({
            value: '3/4/2010 2:3',
            required: true,
            showSeconds: false
        });
        $('#dt2').datetimebox({
            value: '3/4/2010 2:3',
            required: true,
            showSeconds: false
        });
        $("#folder-tree").tree({
            url: "json/sidebar.json",
            method: "get",
            animate: true,
            onContextMenu: function (e, node) {
                e.preventDefault();
                $(this).tree('select', node.target);
                if ("children" in node) {
                    $('#mm1').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                } else {
                    $('#mm2').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    });
                }

            }
        })
        $("#dg").datagrid({
            title: "资料列表0",
            method: "get",
            url: 'json/data_list.json',
            striped: true,
            pagination: true,
            pageNumber: 1,
            pageList: [2, 5, 10, 20, 30],
            rownumbers: true,
            pagePosition: "bottom",
            selectOnCheck: false,
            checkOnSelect: false,
            singleSelect: true,
            columns: [[
                {field: "ck", checkbox: "true"},
                {field: "order", title: '序号', width: 100},
                {field: "filename", title: '文件名', width: 100},
                {field: "updateTime", title: '上传时间', width: 150},
                {field: "updateUser", title: '上传用户', width: 100},
                {field: "filePath", title: '所在文件夹', width: 200},
                {field: "fileSize", title: '文件大小', width: 100},
                {field: "tags", title: '标签列表', width: 100},
                {
                    field: "option", title: '操作', width: 200,
                    formatter: function (value, rowData, index) {
                        return "<a href='javascript:void(0)' onclick='remove(" + rowData.id + ")'>删除   </a>"
                            + "<a href='javascript:void(0)' onclick='toRename(" + rowData.id + ")' >重命名  </a>"
                            + "<a href='javascript:void(0)' onclick='preview(" + rowData.id + ")' >预览  </a>"
                            + "<a href='javascript:void(0)' >编辑标签  </a>"

                    }
                }
            ]],
            loadFilter: function (data) {
                var pager = $('#dg').datagrid('getPager'); // 获取分页器对象
                var options = pager.pagination('options'); // 获取分页器的选项
                // 注意：以下代码是客户端分页的示例，但通常不推荐这样做，因为性能问题
                var start = (options.pageNumber) * options.pageSize;
                var rows = data.slice(start, start + options.pageSize);
                return {total: data.length, rows: rows};

            }
        });

    });

    function search() {

    }

    function batchRemove() {
        $.messager.confirm("提示", "确认全部删除？", function (data) {
            if (data) {
                $.messager.alert("提示", "删除成功", "info")
            }
        })
    }

    function addTag() {
        $.messager.alert('提示', '标签添加成功！');
        $('#dlg').dialog('close');
    }

    function remove(id) {
        $.messager.confirm("提示", '确认删除？', function (data) {
            if (data) {
                $.messager.alert("提示", "删除成功！");
            }
        })
    }

    function toRename(id) {
        $('#dlg-rename').dialog('open');
    }

    function rename() {
        $.messager.alert('提示', '文件名修改成功！');
        $('#dlg-rename').dialog('close');
    }

    function preview(id) {
        window.open('json/data_list.json', '_blank'); // _blank 表示在新的标签页中打开
    }

    function uploadFile() {
        openTopWindow({url: "uploadFile.html", width: 800,height: 500,title: "上传文件",})
    }

    function openTopWindow(options) {
        options = !options ? {} : options;
        options.width = !options.width ? 500 : options.width;
        options.height = !options.height ? 400 : options.height;
        options.url = !options.url ? "404.html" : options.url;
        options.title = !options.title ? "" : options.title;

        parent.$("#topWindow").window({
            title: options.title,
            width: options.width,
            height: options.height,
            content: "<iframe scrolling='no' frameborder='0' border='0' height='100%' width='100%' src='" + options.url + "'></iframe>",
            modal: true,
            resizable: false,
            collapsible: false
        });
    }

    // 随机生成数据
    const generateData = () => {
        const data = [];
        const tags = ['地质', '地震', '钻井', '完井', '测井', '采油', '注水', '注气', '提高采收率', '安全环保'];
        const users = ['张三', '李四', '王五', '赵六', '陈七'];

        for (let i = 0; i < 100; i++) {
            data.push({
                order: i + 1,
                filename: `文件${i + 1}.pdf`,
                updateTime: '2023-07-25T14:30:00Z',
                updateUser: users[Math.floor(Math.random() * users.length)],
                filePath: `/油田资料/地质资料/区块${Math.ceil((i + 1) / 10)}`,
                fileSize: Math.floor(Math.random() * 1024 * 1024) + 'KB',
                tags: tags.slice(0, Math.floor(Math.random() * 3)).join(',')
            });
        }
        return data;
    };
</script>
</body>
</html>
